<template>
  <div class="router-tutorial">
    <div class="tutorial-content">
      <h2>嵌套路由</h2>
      <p>一些应用程序的 UI 由多层嵌套的组件组成。在这种情况下，URL 的片段通常对应于特定的嵌套组件结构，例如：</p>
      
      <pre>/user/profile                  /user/posts
╔═════════════════╗  ╔═════════════════╗
║    User         ║  ║    User         ║
║  ╔═══════════╗  ║  ║  ╔═══════════╗  ║
║  ║  Profile  ║  ║  ║  ║   Posts   ║  ║
║  ╚═══════════╝  ║  ║  ╚═══════════╝  ║
╚═════════════════╝  ╚═════════════════╝</pre>
      
      <p>通过 Vue Router，你可以使用嵌套路由配置来表达这种关系。</p>
      
      <h3>嵌套路由配置</h3>
      <p>配置嵌套路由，你需要在父级路由的配置中添加 <code>children</code> 属性：</p>
      <pre>
const routes = [
  {
    path: '/parent',
    component: Parent,
    children: [
      { path: 'child1', component: Child1 }, // 映射到 /parent/child1
      { path: 'child2', component: Child2 }  // 映射到 /parent/child2
    ]
  }
]</pre>
      
      <h3>嵌套的 router-view</h3>
      <p>要渲染嵌套路由对应的组件，需要在父组件模板中添加 <code>&lt;router-view&gt;</code>：</p>
      <pre>
// Parent.vue
&lt;template&gt;
  &lt;div&gt;
    &lt;h2&gt;父级组件&lt;/h2&gt;
    &lt;router-view&gt;&lt;/router-view&gt; // 子路由组件将在这里渲染
  &lt;/div&gt;
&lt;/template&gt;</pre>
      
      <h3>默认子路由</h3>
      <p>如果你想在访问父级路由时，默认显示一个子路由，可以使用空的子路径：</p>
      <pre>
const routes = [
  {
    path: '/parent',
    component: Parent,
    children: [
      { path: '', component: DefaultChild }, // 当访问 /parent 时显示
      { path: 'child1', component: Child1 },
      { path: 'child2', component: Child2 }
    ]
  }
]</pre>
    </div>
    
    <div class="code-editor">
      <div class="file-tabs">
        <button @click="currentFile = 'router'">router.js</button>
        <button @click="currentFile = 'Parent'">Parent.vue</button>
        <button @click="currentFile = 'Child1'">Child1.vue</button>
        <button @click="currentFile = 'Child2'">Child2.vue</button>
      </div>
      
      <div class="code-preview" v-if="currentFile === 'router'">
        <pre><code>{{ routerTemplate }}</code></pre>
      </div>
      
      <div class="code-preview" v-if="currentFile === 'Parent'">
        <pre><code>{{ parentTemplate }}</code></pre>
      </div>
      
      <div class="code-preview" v-if="currentFile === 'Child1'">
        <pre><code>{{ child1Template }}</code></pre>
      </div>
      
      <div class="code-preview" v-if="currentFile === 'Child2'">
        <pre><code>{{ child2Template }}</code></pre>
      </div>
      
      <div class="result-preview">
        <h4>预览效果：</h4>
        <div class="preview-container">
          <Parent />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import Parent from './components/Parent.vue';

const currentFile = ref('Parent');

// 预定义模板
const routerTemplate = `import { createRouter, createWebHistory } from 'vue-router'
import Parent from './components/Parent.vue'
import Child1 from './components/Child1.vue'
import Child2 from './components/Child2.vue'

const routes = [
  {
    path: '/parent',
    component: Parent,
    children: [
      // 空路径表示默认子路由
      { path: '', redirect: '/parent/child1' },
      { path: 'child1', component: Child1 },
      { path: 'child2', component: Child2 }
    ]
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router`;

const parentTemplate = `<template>
  <div class="parent">
    <h2>父级路由组件</h2>
    <p>这是一个父级路由组件，可以包含子路由</p>
    
    <div class="children-nav">
      <h3>子路由导航</h3>
      <div class="nav-links">
        <router-link to="/parent/child1">子路由1</router-link> | 
        <router-link to="/parent/child2">子路由2</router-link>
      </div>
    </div>
    
    <div class="child-view">
      <!-- 子路由组件将在这里渲染 -->
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup>
// 父组件逻辑
<\/script>

<style scoped>
.parent {
  padding: 20px;
  background-color: #e8f7f0;
  border-radius: 5px;
}

.children-nav {
  margin: 15px 0;
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 3px;
}

.child-view {
  margin-top: 15px;
  padding: 15px;
  border: 1px dashed #aaa;
  border-radius: 3px;
}
</style>`;

const child1Template = `<template>
  <div class="child">
    <h3>子路由组件 1</h3>
    <p>这是第一个子路由组件</p>
  </div>
</template>

<script setup>
// 子组件逻辑
<\/script>

<style scoped>
.child {
  padding: 15px;
  background-color: #f0f9ff;
  border-radius: 4px;
}
</style>`;

const child2Template = `<template>
  <div class="child">
    <h3>子路由组件 2</h3>
    <p>这是第二个子路由组件</p>
  </div>
</template>

<script setup>
// 子组件逻辑
<\/script>

<style scoped>
.child {
  padding: 15px;
  background-color: #fff0f0;
  border-radius: 4px;
}
</style>`;
</script>

<style scoped>
.router-tutorial {
  display: flex;
  height: 100%;
}

.tutorial-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  border-right: 1px solid #ddd;
}

.code-editor {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.file-tabs {
  display: flex;
  background-color: #f0f0f0;
  border-bottom: 1px solid #ddd;
}

.file-tabs button {
  padding: 8px 16px;
  border: none;
  background: none;
  cursor: pointer;
}

.file-tabs button:hover {
  background-color: #e0e0e0;
}

.code-preview {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  background-color: #f9f9f9;
}

pre {
  margin: 0;
  white-space: pre-wrap;
  font-family: monospace;
}

.result-preview {
  height: 300px;
  border-top: 1px solid #ddd;
  padding: 10px;
  overflow-y: auto;
}

.preview-container {
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 15px;
  background-color: white;
}
</style> 